<template>
  <!--试驾有礼-->
<div class="container1">
  <div v-show="pageState==1">
    <div class="header" >
      <img class="header-bg" src="../../assets/GZH/shiqiyouli.jpg" alt="">
      <div class="rule" @click="showHidePopup">活动规则</div>
    </div>
    <div class="main" >
      <van-tabs class="borderRadius20" v-model="active">
        <van-tab title="门店活动">
          <div class="branchList">
            <div class="branch-Item" v-for="(item, index) in markers" :key="index" v-if="markers.length>0">
              <div class="branch-info">
                <img class="shop-img" :src="item.shopImgs?item.shopImgs[0]:'https://jike.xingjiakeji.com/upload/web/shopImg.png'" />
                <div class="right-info">
                  <div class="title-collect-box">
                    <span>{{item.activityName}} ({{item.shopName}})</span>
                  </div>
                  <div class="tag">
                    <span class="text1"  v-if="item.saleSupport">购车</span>
                    <span class="text2"  v-if="item.repairSupport">维修</span>
                    <span class="text3"  v-if="item.maintainSupport">保养</span>
                    <span class="text4" v-if="item.rescueSupport">救援</span>
                  </div>
                  <div class="address">地址：{{item.shopAddress}}</div>
                  <div class="time">营业时间：{{item.startHours}}~{{item.endHours}}</div>
                </div>
              </div>
              <div class="btn">
                <div class="tel" :data-phone="item.shopPhone" @click="service($event)">
                    <img class="ico" src="../../assets/GZH/tel.png"/><span>打电话</span>
                </div>
                <div class="go" :data-markerid="item.shopId" :data-type="1" @click="callouttap($event)">
                    <img class="ico" src="../../assets/GZH/navigation.png" /><span>去这里</span>
                </div>
              </div>
            </div>
            <div class="no-data" v-if="markers.length==0">
                <img class="" src="../../assets/GZH/no-data.png" alt="">
            </div>
          </div>
        </van-tab>
        <van-tab title="广场活动">
          <div class="activeList">
            <div class="branchList">
              <div class="branch-Item" v-for="(item, index) in markers1" :key="index" v-if="markers.length>0">
                <div class="branch-info">
                  <img class="shop-img" :src="item.activityListImage?item.activityListImage:'https://jike.xingjiakeji.com/upload/web/shopImg.png'" />
                  <div class="right-info-a">
                    <div class="title-collect-box title-a">
                      <span>{{item.activityName}}</span>
                    </div>
                    <div class="address">地址：{{item.activityAddress}}</div>
                    <div class="time">联系电话：{{item.activityPhone}}</div>
                  </div>
                </div>
                <div class="btn">
                  <div class="go" :data-markerid="item.activityId" :data-type="2" @click="callouttap($event)">
                      <img class="ico" src="../../assets/GZH/navigation.png" /><span>去这里</span>
                  </div>
                </div>
              </div>
              <div class="no-data" v-if="markers.length==0">
                  <img class="" src="../../assets/GZH/no-data.png" alt="">
              </div>
            </div>

          </div>
        </van-tab>
      </van-tabs>

      <div class="footer">
        <div class="testDrive" @click="scanBtn">扫码试驾</div>
      </div>
    </div>
  </div>
  <div v-show="pageState==2" style="height:100%;background:#000">
    <img class="control-Bg" :src="controlCarBg" alt="">

    <div class="shijia">
      <div class="shijiaRule" @click="showHidePopup"></div>
      <div class="control">
        <div class="kaizuosuo" @click="icarCtrl(4)" v-show="seatLockControl"></div>
        <div class="kaizuosuo"  v-show="!seatLockControl"><div class="cover" ></div></div>
        <div class="jiesuo" @click="icarCtrl(0)"></div>
        <div class="xunche" @click="icarCtrl(2)"></div>
        <div class="suoche" @click="icarCtrl(1)"></div>
        <div class="dingwei" @click="icarCtrl(3)"></div>
      </div>
      <!-- <img class="shijiabtn" src="../../assets/GZH/shijia.png" alt=""> -->
      <!-- <div>123</div> -->
      <div class="footer1" @click="lottery">
        <!-- <div class="testDrive" @click="lottery">结束试驾，去抽大奖</div> -->
      </div>
    </div>
  </div>
  <van-popup
    v-model="PopupState"
  >
    <div class="model-main">
      <div class="model-tit">活动规则</div>
      <div class="rule-sjyl" v-html="ruleData">
        <!-- <p><i></i>1、用户可多次试骑，但每个手机号仅限参与一次抽奖活动；</p>
        <p><i></i>2、用户在完成试驾后，将获得一次抽奖机会，100%中取微信现金红包，购车代金券，并有机会赢取九银KING免单大奖；</p>
        <p><i></i>3、用户中取的微信红包将会通过九银官方服务号立即发送，用户需要在服务号内点击领取存入微信余额；
</p>
        <p><i></i>4、用户中取的购车代金券，可在现场购买指定车型时抵扣对应购车金额，不兑现不找零；</p>
        <p><i></i>5、用户中取免单大奖，需联系现场工作人员领取；</p>
        <p><i></i>6、在法律允许的范围内，活动解释权由九银锂电车负责。</p> -->
      </div>
      <div class="model-btn" @click="showHidePopup">我知道了</div>
    </div>
  </van-popup>

   <van-popup
    v-model="PopupLogin"
  >
    <div class="bindPhone">
      <div class="bind-tit">绑定手机</div>
      <div class="phone-input">
        <input type="tel" maxlength="11" placeholder="请输入手机号" v-model="phone" ref="code"/>
        <div class="post_send" @click="sendCode()" v-show="codeBtnshow"><span>获取验证码</span></div>
        <div class="count"    v-show="!codeBtnshow"><span>{{count}}</span></div>
      </div>
      <input type="tel" maxlength="6" ref="input" v-model="captchaCode" class="getCode"/>
      <!-- <paycodeApp @getPwd="getPwd"></paycodeApp> -->
      <div class="affirmBind" @click="affirmBind">绑定</div>
    </div>
  </van-popup>

  <van-popup v-model="gzggzModule" class="gzggzModule">
    <div class="gzggz-box">
      <img src="../../assets/GZH/gzgzh.png" alt="">
    </div>
  </van-popup>
</div>

</template>

<script>
import { Popup,Toast,Dialog,Tab, Tabs } from 'vant';
import weixin from './wxConfig.js'
import md5 from '../../utils/md5.js'
// import paycodeApp from  './pwd'
export default {
  components:{
    [Tab.name]:Tab,
    [Tabs.name]:Tabs,
    [Dialog.name]:Dialog,
    [Popup.name]:Popup,
    [Toast.name]:Toast,
    // paycodeApp
  },
  directives: {
    focus: {
      //根据focusState的状态改变是否聚焦focus
      update: function (el, value) {    //第二个参数传进来的是个json
      console.log(el, value)
        if (value.value) {
          el.focus()
        }
      }
    }
  },
  // latitude: 31.22024,
  // longitude: 121.42394

  data(){
    return{
      seatLockControl:0,
      controlCarBg:require('../../assets/GZH/control-car.jpg'),
      active: 0,
      PopupState:false,//规则
      gzggzModule:false,
      PopupLogin:false,//绑定手机
      codeBtnshow:true,//短信按钮
      userInfo:'',
      pageState:1,
      carNo:'',
      control:false,//控车
      markers:[],//附近网点
      markers1:[],//广场活动
      latitude: '',//坐标
      longitude: '',//坐标
      phone:'',//手机
      timer: false,
      count:0,//读秒时间
      captchaCode:'',
      ruleData:'',//规则数据
      disable:true,
      activityId:'',
      carNo:'',
      shopId:'',
      lotteryCount:'',//抽奖次数
      shareImg:require('../../assets/GZH/share-ico.png'),
      noSendCode:false,//无验证时，直接绑定通过
      focusState:false,
    }
  },
  mounted(){
    // http://d-static.jike.udui.com/activities/prod/pmd.html?activityId=3
    console.log('试驾规则','https://jike.xingjiakeji.com/exprience/index.html?activityId=1&carNo=080004222&shopId=3')
    let _this = this;
    let code = this.$util.getUrlKey('code');
    let token = localStorage.getItem('token');
    _this.token = token;
    console.log('token',_this.token)

    if(code){
      //有code静默登录，获取权限
      this.getWeixincofig('config')
      this.near_list(1);
      this.near_list(2);
    }else{
      // 无code跳转获取code
      this.getWeixincofig('Login')
    }
    _this.rule();

    let root = process.env.VUE_APP_MAIN;
    let share = process.env.VUE_APP_SHARE
    // 分享
    // location.href.split('?')[0]+'#/share'
    // https://mp.weixin.qq.com/s/4ZWNSSbI6AEVe17i1axBwQ

    setTimeout(() => {
      let shopId = '';
      let activityId='';
      console.log('分享')
      console.log(weixin.wxShare)
      if(!this.shopId){
        if(this.markers){
          shopId = this.markers[0].shopId
        }
      }
      if(!this.activityId){
        if(this.markers){
          activityId = this.markers[0].activityId
        }
      }
      // 防封换地址
      // location.href.split('?')[0]+'activities/share/index.html?shopId='+shopId+'&activityId='+activityId
      // 'http://static.jike.udui.com/a.html?shopId='+this.shopId+'&activityId='+this.activityId
      weixin.wxShare({
        title:'抢啊,你倒是抢啊,九银锂电车不花钱也可以抢免单',
        desc:'九银锂电车超级试骑赢免单活动火爆进行，等你来抢',
        link:share+'?shopId='+shopId+'&activityId='+activityId,
        imgUrl:'https://imgsa.baidu.com/fex/pic/item/e7cd7b899e510fb366e12c8bd633c895d1430c35.jpg',
      })
    }, 1000);
  },

  methods:{
    // 活动规则
    rule(){
      let _this = this;
        this.$api.post("/global/v1/text?key=EXPRIENCE_ROLE_HTML",{},s => {
          console.log(s);
          _this.ruleData = s.module
      },f => {

      },{
        "Content-Type": "application/x-www-form-urlencoded",
        Accept: "*/*"
      });
    },
    // getPwd(data){
    //   console.log(data)

    //   this.captchaCode = data;
    // },
    // 获取微信配置
    getWeixincofig(str){
      let _this = this;
      let url = escape(location.href.split("#")[0]+'#/testDrive');
//  let url = encodeURIComponent(process.env.VUE_APP_MAIN+'%23/testDrive');
// let url = process.env.VUE_APP_MAIN+escape('#/testDrive');
console.log('url',url)
      // let url = encodeURIComponent(process.env.VUE_APP_MAIN+'%23/testDrive');
      // let url = 'http://sunjinxiang.wicp.vip/#/testDrive';
      this.$api.get("/wx/v1/jsapi_sigin?url=" + url,{},s => {
          console.log(s);
          let data = s.module;
          if(str=='Login'){
            // 微信网页授权snsapi_base，snsapi_userinfo区别和实现
            window.location.replace('https://open.weixin.qq.com/connect/oauth2/authorize?appid='+data.appId+'&redirect_uri='+url+'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect')
          }else{
            weixin.wxConfig(data);
              _this.wxLogin();
            setTimeout(()=>{
              weixin.getLocation((res)=>{
                console.log(res)
                _this.latitude = res.latitude;
                _this.longitude = res.longitude;
              });
            },2000)
          }
      },f => {

      },{
        "Content-Type": "application/x-www-form-urlencoded",
        Accept: "*/*"
      });
    },
    // 登录
    wxLogin(){
      console.log(123)
      let _this = this;
      let code = this.$util.getUrlKey('code');
      console.log(code)
      var SECRET = process.env.VUE_APP_SECRET;
      console.log(SECRET)
      let sign = md5("code=" + code + "&secret=" +SECRET ).toLowerCase()
      console.log(sign)
      this.$api.get("/wx/v1/login?code=" + code+'&sign='+sign,{},s => {
          console.log(s);
          let data = s.module;
          localStorage.setItem('token', data);
          _this.token = data;
          _this.userInfoFunc(data,'phone');
      },f => {
        console.log('f',f)
        if(f.resultCode=='40029'||f.resultCode=='40163'||f.resultCode=='42003'||f.resultCode=='41008'){
          window.location.href = process.env.VUE_APP_MAIN+'#/testDrive'
        }else{
          Toast(f.errorMessage);
        }

      },{
        "Content-Type": "application/x-www-form-urlencoded",
        Accept: "*/*"
      });
    },
    // 结束试驾，去抽奖
    lottery(){
      let _this = this;
      // if(!_this.userInfo.subscribe){
      //   Dialog.alert({
      //     title: '微信红包提示',
      //     message: '请联系工作人员，由工作人员引导跳转抽奖页面'
      //   }).then(() => {
      //     // on close
      //     // window.location.replace('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA3NzQyNzE4Mw==&scene=124#wechat_redirect')
      //   });
      //   return ;
      // }
      this.$api.post("/exprience/v1/authExpApi/stop_experience?recordId="+_this.userInfo.recordApiDto.id,{},s => {
          console.log(s);
           Toast('结束试驾成功');
          _this.userInfoFunc(_this.token);
          setTimeout(()=>{
            _this.pageState=1
          },1000)
           console.log(_this.lotteryCount )
           console.log(_this.$util.root+'activities/prod/pmd.html?activityId='+_this.activityId+'&shopId='+_this.shopId)
           _this.gzggzModule=true;
          if(!_this.lotteryCount){

            // Dialog.alert({
            //   title: '抽奖提示',
            //   message: '您已成功结束试骑，请联系工作人员获取抽奖码，参与抽奖！'
            // }).then(() => {
            //   // on close
            // });
            //  console.log('jinlai le ')
            // window.location.replace(_this.$util.root+'activities/prod/pmd.html?activityId='+_this.activityId+'&shopId='+_this.shopId+'&timestamp='+ new Date().getTime()+Math.random())
          }else{
            // Toast('无法抽奖');
            // Dialog.alert({
            //   title: '标题',
            //   message: '您已参与过该活动！活动机会有限，请与大家一起分享！'
            // }).then(() => {
            //   // on close
            // });
          }

      },f => {

      },{
        "Content-Type": "application/x-www-form-urlencoded",
        Accept: "*/*",
        expToken:_this.token
      });
    },
    // 获取用户信息
    userInfoFunc(data,phone){
      let _this = this;
      this.$api.get("/wx/v1/authExpApi/userInfo",{},s => {
          console.log(s);
          _this.userInfo = s.module;
           if(s.module.recordApiDto){
            _this.seatLockControl = s.module.recordApiDto.carInfoApiDto.seatLockControl
            _this.carNo=s.module.recordApiDto.carInfoApiDto.carNo
            _this.pageState=2;
            _this.activityId = s.module.recordApiDto.activityId;
            _this.shopId = s.module.recordApiDto.shopId;
            localStorage.setItem('activityId', s.module.recordApiDto.activityId);
            localStorage.setItem('shopId', s.module.recordApiDto.shopId);
           }
           if(phone == 'phone'){
              let scanCode = _this.$util.getUrlKey('scanCode');
              if(scanCode&&s.module.phone){
                _this.sanAjax(scanCode);
              }
           }
      },f => {
        console.log(123)
        // _this.wxLogin();
      },{
        "Content-Type": "application/x-www-form-urlencoded",
        Accept: "*/*",
        expToken:data
      });
    },
    // 扫码事件
    scanBtn(){
      let _this = this;
      let activityId ='';
      let carNo ='';
      let shopId = '';

      let code = this.$util.getUrlKey('code');
      console.log('code',code)
      if(!code||code=='null'){
        // history.go(0)
        window.location.href = encodeURIComponent(process.env.VUE_APP_MAIN+'#/testDrive')
      }

      if(!this.userInfo.phone){
        _this.PopupLogin=!_this.PopupLogin
      }else{
        console.log('weixin',weixin)
        // let result = res.resultStr;
        weixin.scanQRCode((res)=>{
          console.log('res',res)
          let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
          // if(result.indexOf('https://jike.xingjiakeji.com/exprience/index.html') == 0){
          //   activityId = this.$util.getCustomUrlKey(result,'activityId');
          //   carNo = this.$util.getCustomUrlKey(result,'carNo');
          //   shopId = this.$util.getCustomUrlKey(result,'shopId');
          //   _this.activityId = activityId;
          //   _this.carNo = carNo;
          //   _this.shopId = shopId;
          //   _this.sanAjax(activityId,carNo,shopId);

          // }else
          if(result.indexOf('scanCode') > 0){
            // activityId = this.$util.getCustomUrlKey(result,'activityId');
            // carNo = this.$util.getCustomUrlKey(result,'carNo');
            // shopId = this.$util.getCustomUrlKey(result,'shopId');
            // _this.activityId = activityId;
            // _this.carNo = carNo;
            // _this.shopId = shopId;
            let scanCode = _this.$util.getCustomUrlKey(result,'scanCode');
            _this.sanAjax(scanCode);
          }else if(result.indexOf('verification') > 0){
            Toast('请从公众号菜单"试骑有奖"进入抽奖页面');
          }else{
            Toast('请扫描正确的试骑码/抽奖码');
          }

        });
      }
    },
    // 绑定手机 POST /wx/v1/authExpApi/bind_phone 微信公众号绑定手机号
    affirmBind(){
      let _this = this;
      let phone = this.phone;
      if(!(/^1[3456789]\d{9}$/.test(phone))){
          Toast('请输入正确的手机号');
          return false;
      }
      this.$api.post("/wx/v1/authExpApi/bind_phone?phone="+this.phone+'&captchaCode='+this.captchaCode,{},s => {
          console.log(s);
          _this.PopupLogin = !_this.PopupLogin
          _this.userInfo = s.module;
          _this.scanBtn();
      },f => {
        Toast(f.errorMessage);
      },{
        "Content-Type": "application/x-www-form-urlencoded",
        Accept: "*/*",
        expToken:this.token
      });
    },
    //发送验证码
    sendCode(){
       let phone = this.phone;
       let time = 60;
       let _this =this;
        if(!(/^1[3456789]\d{9}$/.test(phone))){
            Toast('请输入正确的手机号');
            return false;
        }
        _this.$refs.input.focus();
        // console.log(_this.$refs)
        // this.$api.get('/exprience/v1/near_list?support=&lng=&lat=&addressType=1',{
        // },s=>{
        //   console.log(s)
        //   _this.$refs.input.focus();
        //   console.log(_this.$refs)

        // },f=>{
        //     Toast(f.errorMessage);
        // },{
        //   'Content-Type': 'application/x-www-form-urlencoded',
        //   'Accept': "*/*"
        // })
        // return;
        if (!this.timer) {
          this.timer = true;
          // POST /sendCode/v1/sendRegSms
          this.$api.post('/sendCode/v1/sendRegSms?phone='+this.phone,{},s=>{
            Toast('验证码发送成功');
            this.count = time;
            this.codeBtnshow = false;

            this.focusState = true
            var countTime = setInterval(() => {
              if (this.count > 0 && this.count <= time) {
                this.count--;
                if(this.count<=30&&!this.noSendCode){
                  this.noSendCode = true;
                  //调用绑定手机
                  this.affirmBind()
                }
              } else {
                this.noSendCode = false;
                this.codeBtnshow = true;
                clearInterval(countTime);
                this.timer = false;
              }
            }, 1000)
          },f=>{
            this.timer = false;
            Toast(f.errorMessage);
            return;
          });
        }
      },
       // 试驾活动扫码
    sanAjax(code){
      let _this = this;
      this.$api.post('/exprience/v2/authExpApi/scan?code='+code,{
      },s=>{
        console.log(s)
        if(s.success){
          // activityId,carNo,shopId
          _this.activityId = s.module.activityId
          _this.carNo = s.module.carInfoApiDto.carNo
          _this.shopId = s.module.shopId

          _this.lotteryCount = s.module.lotteryCount
          _this.userInfoFunc(_this.token)
          // _this.carNo = carNo;
          _this.pageState=2
        }
        let share = process.env.VUE_APP_SHARE
        weixin.wxShare({
          title:'抢啊,你倒是抢啊,九银锂电车不花钱也可以抢免单',
          desc:'九银锂电车超级试骑赢免单活动火爆进行，等你来抢',
          link:share+'?shopId='+_this.shopId+'&activityId='+_this.activityId,
          imgUrl:'https://imgsa.baidu.com/fex/pic/item/e7cd7b899e510fb366e12c8bd633c895d1430c35.jpg',
        })

      },f=>{
          Toast(f.errorMessage);
      },{
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': "*/*",
        'expToken':this.token
      })
    },
    // 试驾活动扫码
    // sanAjax(activityId,carNo,shopId){
    //   let _this = this;
    //   this.$api.post('/exprience/v1/authExpApi/scan?activityId='+activityId+'&carNo='+carNo+'&shopId='+shopId,{
    //   },s=>{
    //     console.log(s)
    //     if(s.success){
    //       _this.lotteryCount = s.module.lotteryCount
    //       _this.userInfoFunc(_this.token)
    //       _this.carNo = carNo;
    //       _this.pageState=2
    //     }
    //     weixin.wxShare({
    //       title:'抢啊,你倒是抢啊,九银锂电车不花钱也可以抢免单',
    //       desc:'九银锂电车超级试骑赢免单活动火爆进行，等你来抢',
    //       link:location.href.split('?')[0]+'activities/share/index.html?shopId='+_this.shopId+'&activityId='+_this.activityId,
    //       imgUrl:process.env.VUE_APP_MAIN+ _this.shareImg,
    //     })

    //   },f=>{
    //       Toast(f.errorMessage);
    //   },{
    //     'Content-Type': 'application/x-www-form-urlencoded',
    //     'Accept': "*/*",
    //     'expToken':this.token
    //   })
    // },
    //  用户控车
    icarCtrl(num){
      let _this = this;
      let type = num;
      let carNo = this.carNo;
      let mlng = this.longitude
      let mlat = this.latitude;
      // if(type==4){
      //   let seatLockControl = _this.userInfo.recordApiDto.carInfoApiDto.seatLockControl;
      //   if(!seatLockControl){
      //     return;
      //   }
      // }
      if (!this.disable) {
          return false;
        }else{
          this.disable=false;
        }
      this.$api.post('/exprience/v1/authExpApi/ctrl?type='+type+'&mlng='+mlng+'&mlat='+mlat,{
      },s=>{
        _this.disable=true;
        console.log(s)
        if(s){
            if (type == 3) {
            let latitude = s.module.carLat;
            let longitude = s.module.carLng;
            if (!latitude) {
              Toast('定位失败');
              return false;
            }
            if (!longitude) {
              Toast('定位失败');
              return false;
            }
            let name = '我的爱车位置';
            let address = '';
            weixin.openLocation({
              latitude:latitude,
              longitude:longitude,
              name:name,
              address:address
            })
          }else{
            Toast('控制成功');
          }
        }
      },f=>{
        _this.disable=true;
          Toast(f.errorMessage);
      },{
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': "*/*",
        'expToken':this.token
      })
    },
    // 显示隐藏活动规则
    showHidePopup(){
      console.log(123)
      this.PopupState = !this.PopupState;
    },
    // 网点列表
    near_list(addressType){
      let _this = this;
      let latitude='';
      let longitude='';

      if(_this.latitude){
        latitude = _this.latitude;
        longitude = _this.longitude
      }
      this.$api.get('/exprience/v1/near_list?support=&lng='+longitude+'&lat='+latitude+'&addressType='+addressType,{
      },s=>{
        console.log(s)
        if(addressType==1){
          _this.markers=s.module;
        }else{
          _this.markers1=s.module;
        }

      },f=>{
          Toast(f.errorMessage);
      },{
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': "*/*"
      })
    },
    // 电话
    service(e){
      let phone = e.currentTarget.dataset.phone;
      if (phone){
        window.location.href = "tel:"+phone;
      }else{
        Toast('商家未设置电话');
      }
    },
    // 地图导航
    callouttap(e){
      let data={};
      let clickId = e.currentTarget.dataset.markerid;
      let type = e.currentTarget.dataset.type;
      let markers =[];
      if(type==1){
        markers = this.markers;
      }else{
        markers = this.markers1;
      }

      var len = markers.length;
      var clickIndex = 0;
      for (var i = 0; i < len; i++) {
        if (markers[i].shopId == clickId) {
          clickIndex = i;
        }
      }
      // console.log(this.markers,this.markers1)
      // console.log('clickId',clickId)
      // console.log('type',type)
      // console.log('clickIndex',clickIndex)
      if(type==1){
        data.latitude = markers[clickIndex].shopLat;
        data.longitude = markers[clickIndex].shopLng;
        data.name = markers[clickIndex].shopName;
        data.address = markers[clickIndex].shopAddress;
      }else{
        data.latitude = markers[clickIndex].activityLat;
        data.longitude = markers[clickIndex].activityLng;
        data.name = markers[clickIndex].activityName;
        data.address = markers[clickIndex].activityAddress;
      }

      // 调用微信
      weixin.openLocation(data)
    }
  }
}
</script>
<style>
.van-popup{
  position:absolute;
}
.rule-sjyl p{
  position:relative;
}
.rule-sjyl i{
  position: absolute;;
  top:7px;
  left:-10px;
  display: inline-block;
  width:5px;
  height:5px;
  border-radius:12px;
  background: #ff5e37;
}
</style>

<style scoped lang="scss">
.van-popup{
  width:300px;
  padding:20px;
  // min-height:300px;
  border-radius: 16px;
}
.container1{
  // overflow: hidden;
  width:100%;
  height:100%;
  text-align: left;
  background:#f5f5f5;
}
.control-Bg{
  width:100%;
}
.shijiaRule{
  position: absolute;
  left:50%;
  top:-35px;
  z-index:1;
  width:100px;
  height:30px;
  margin-left:-50px;
}
.header{
  position:relative;
  width:100%;
  min-height:600px;
}
.borderRadius20{
  overflow: hidden;
  border-radius: 20px 20px 0 0 ;
}
.header-bg{
  position: absolute;
  left:0;
  top:0;
  z-index:0;
  width:100%;
}
.rule{
  position:absolute;
  right:0;
  top:150px;
  width:65px;
  height:25px;
  text-align: center;
  line-height: 25px;
  font-size:12px;
  border-radius: 25px 0 0 25px;
  background: rgba(0,0,0,0.5);
  color:#fff;
}
.main{
  position: relative;
  z-index:100;
  width:100%;
  min-height:300px;
  margin-top:-150px;
  border-radius: 30px;
  // border:1px solid red;
  padding-bottom:100px;
  background: #f5f5f5;
}
.branchList,.activeList{
  position:relative;
  z-index:1;
  width:94%;
  min-height:200px;
  margin: 0 auto;
}
.activeList{
  width:100%;
}
.branch-Item:nth-of-type(1){
  margin-top:15px;
}
.branch-Item{
  width:100%;
  height:150px;
  margin-bottom:15px;
  border-radius:12px;
  background:#fff;
}
.branch-info{
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:100%;
  height:105px;
}

.btn{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:100%;
  height:45px;
  border-top:1px solid #eee;
}
.shop-img{
  width:80px;
  height:80px;
  margin:0 10px;
  border-radius: 6px;
  overflow: hidden;
}
.right-info{
  display: flex;
  flex:1;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  height:100%;
}
.right-info-a{
  display: flex;
  flex:1;
  flex-direction: column;
  align-items: left;
  height:100%;
}
.title-a{
  margin-top:10px;
}
// .right-info .collect{
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   width:36px;
//   height:33px;
//   margin-right:10px;
// }
// .right-info .collect-img{
//   width:18px;
//   height:16px;
// }
.right-info-a .address{
  margin-top:20px;
}
.title-collect-box{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size:15px;
  font-weight:500;
  color:#333;
}
.title-collect-box span{
  // width:400px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.tag{
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  width:100%;
  height:30px;
}
.address,.time{
  font-size:13px;
  color:#999;
}
.text1,.text2,.text3,.text4{
  width:33px;
  height:16px;
  margin-right:5px;
  text-align: center;
  font-size:11px;
  // line-height:16px;
  border-radius:2px;
  background: #ff5c2a;
  color:#fff;
}
.text2{
  background: #84e21b;
  color:#fff;
}
.text3{
  background: #ff9600;
  color:#fff;
}
.text4{
  background: #970f0b;
  color:#fff;
}
.tel,.go{
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex:1;
  font-size:13px;
  color:#666;
}
.tel{
  border-right:1px solid #eee;
}
.tel .ico,.go .ico{
  position:relative;
  top:0px;
  margin-right:5px;
  width:11px;
  height:12px;
}

.model-tit{
  text-align: center;
  font-size:15px;
  font-weight:600;
  color:#333;
}
.model-main .rule-sjyl{
  position: relative;
  margin-top:10px;
  font-size:12px;
  line-height: 22px;
  color:#666;
}

.model-btn{
  width: 150px;
  height: 46px;
  margin: 20px auto;
  font: 13px/46px "Mircosoft YaHei";
  text-align: center;
  border-radius: 46px;
  background: #ff5d2e;
  color: #fff;
  box-shadow: 0 2px 25px 0 #ff7e59;
}
.no-data{
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:200px;
}
.no-data img{
  width:129px;
  height:123px;
}
.footer{
  position:fixed;
  bottom:0;
  left:0;
  z-index:200;
  width:100%;
  height:85px;
  border-top:1px solid #f1f1f1;
  background: #fff;
}
.footer1{
  position: absolute;;
  top:300px;
  left:0;
  z-index:200;
  width:100%;
  height:85px;
  // border-top:1px solid #f1f1f1;
  background: #fff;
  // border:1px solid red;
  background:none;
}
.testDrive,.affirmBind{
  width: 325px;
  height: 50px;
  margin: 20px auto;
  font: 13px/50px "Mircosoft YaHei";
  font-weight:600;
  text-align: center;
  border-radius: 51px;
  background: #ff4001;
  color: #fff;
  box-shadow: 0 2px 25px 0 #ff7e59;
}
.affirmBind{
  width: 260px;
  height: 50px;
  font: 14px/50px "Mircosoft YaHei";
  box-shadow:none;
  margin: 10px auto;
}
.bind-tit{
  text-align: center;
  font-size:18px;
  color:#333;
  font-weight:600;
}
.phone-input {
  position:relative;
  display: inline-block;
  width: 100%;
  height: 50px;
  font-size:14px;
  font-weight:500;
  line-height:25px;
  padding-left:10px;
  color:#333;
  border-bottom:1px solid #eaeaea;
}
.phone-input input{
  height:48px;
  line-height: 25px;
  border:none;
}
.post_send,.count {
  position: absolute;
  top:0px;
  right: 0;
  width: 95px;
  height: 50px;
  font-size: 14px;
  text-align: center;
  color:#999;
}
.post_send span,.count span{
  display: inline-block;
  width:100%;
  line-height: 20px;
  border-left:1px solid #e5e5e5;
}
.post_send span{
  margin-top:16px;
}
.shortInput{
  height:100%;
}
  .shijia{
    position: absolute;
    left:0;
    top:178px;
    width:100%;
    min-height:232px;
  }
  .shijiabtn{
    position: relative;
    z-index:100;
    width:100%;
    margin-top:-100px;
  }
  .control{
    position: absolute;
    left:0;
    // top:-100px;
    z-index:200;
    width:100%;
    height:100%;
  }
  .kaizuosuo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left:114px;
    top:15px;
    width:125px;
    height:87px;
    // border:1px solid red;
  }
  .cover{
    width:50px;
    height:60px;
    margin-top:-20px;
    background: rgba(0,0,0,0.5);
  }
  .jiesuo{
    position: absolute;
    left:33px;
    top:100px;
    width:87px;
    height:125px;
    //  border:1px solid red;
  }
  .xunche{
    position: absolute;
    left:119px;
    top:100px;
    width:123px;
    height:123px;
    //  border:1px solid red;
  }
  .suoche{
    position: absolute;
    right:33px;
    top:100px;
    width:87px;
    height:125px;
    //  border:1px solid red;
  }
  .dingwei{
    position: absolute;
    left:114px;
    top:225px;
    width:125px;
    height:87px;
  }
  .getCode{
    width:100%;
    height:50px;
    padding-left:10px;
    border:none;
    font-size: 16px;
    line-height: 25px;
    letter-spacing:30px;
    border-bottom:1px solid #eaeaea;
  }
  .gzggz-box{
    width:275px;
    height:375px;
  }
  .gzggz-box img{
    width:100%;
    height:100%;
  }
  .gzggzModule{
    background-color: rgba(0,0,0,0);
  }
</style>